<template>
  <div>
    <van-pull-refresh v-model="isLoading" :disabled="disabledRefresh" @refresh="onRefresh">
      <van-list
        ref="list"
        v-model="loading"
        :finished="finished"
        :finished-text="bussinessList.length > 0?'没有更多了哦！':''"
        :offset="10"
        :immediate-check="false"
        @load="onLoad"
      >
        <ul v-if="bussinessList.length > 0" class="bussiness-list">
          <li
            v-for="(item,index) in bussinessList"
            :key="index"
            class="bussiness-item"
            @click="goDetail(item.Id)"
          >
            <van-image
              v-lazy
              class="bussiness-item__logo"
              :src="item.Logo?$webInfo.ImgDomain + item.Logo:require('@/assets/images/no-img.jpg')"
              alt="logo"
              round
              fit="cover"
            />
            <div class="bussiness-item__info toe">
              <h2 class="title">{{ item.StoreName }}</h2>
              <div class="flex flex-s-b flex-v-c">
                <van-rate
                  v-model="item.Score"
                  color="#ff435b"
                  void-icon="star"
                  void-color="#dcdcdc"
                  readonly
                />
                <span
                  class="distance"
                >距离：{{ item.Distance != -1?item.Distance.toFixed(2) + 'km':'超过20km+' }}</span>
              </div>
              <p class="desc toe">{{ item.StoreExplain }}</p>
              <p class="time">营业时间：{{ item.BusinessHours?item.BusinessHours:'未知' }}</p>
            </div>
          </li>
        </ul>
        <no-data v-if="bussinessList.length == 0 && !loading" />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import noData from 'components/noData'
import { getPageListByType } from 'api/store'

export default {
  name: 'BussinessList',
  components: {
    noData
  },
  props: {
    disabledRefresh: {
      type: Boolean,
      default: false
    },
    isRefresh: {
      type: Boolean,
      default: false
    },
    condition: {
      type: Object,
      default: () => ({
        CategoryId: -1,
        IsRecommend: -1,
        SortType: 1,
        ProvinceId: 0,
        CityId: 0,
        AreaId: 0,
        Lng: 0,
        Lat: 0,
        PageIndex: 1,
        PageSize: 20,
        SearchKey: ''
      })
    },
    listLoad: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      // 下拉刷新
      isLoading: false,
      // 上拉加载更多
      loading: true,
      finished: false,
      bussinessList: []
    }
  },
  watch: {
    isRefresh(val) {
      // console.log(val);
      if (val) {
        this.finished = false
        // 触发刷新
        // this.$emit("listRefresh");
        this.onRefresh()
      }
    }
  },
  created() {},
  methods: {
    // 下拉刷新
    onRefresh() {
      this.bussinessList = []
      this.loading = true
      this.condition.PageIndex = 1
      this.getPageListByType()
      // setTimeout(() => {
      //   this.refresh = false;
      //   this.finished = false;
      // }, 500);
    },
    // 查看店铺详情
    goDetail(id) {
      this.$router.push({
        path: '/businessDetail/' + id
      })
    },
    // 上拉异步加载更多
    onLoad() {
      // console.log("加载更多");
      this.condition.PageIndex = this.condition.PageIndex + 1
      this.getPageListByType()
      // setTimeout(() => {
      //   this.loading = false;
      //   this.finished = true;
      // }, 2000);
    },
    // 获取商户列表
    getPageListByType() {
      if (this.listLoad) {
        getPageListByType(this.condition).then(res => {
          // console.log(res);
          if (res) {
            this.bussinessList = this.bussinessList.concat(res.Data)
            // console.log(this.bussinessList);
            this.isLoading = false
            this.$emit('listRefresh')
            if (this.condition.PageIndex < res.TotalAmout) {
              this.loading = false
              this.finished = false
              // 检测是否到底加载更多
              this.$refs['list'].check()
            } else {
              this.loading = false
              this.finished = true
            }
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

